<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ include file="/WEB-INF/views/include/constrant.jsp"%>
<html>
<head>
<%@ include file="/WEB-INF/views/wx/include/head.jsp" %>
</head>
<body>
	<header class="mui-bar mui-bar-nav">
		<a onclick="history.go(-1);" class="mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">填写订单</h1>
	</header>
	<div class="mui-content">
		<c:if test="${not empty messagesFor12Hour }"><div class="warn-tip">温馨提示：${messagesFor12Hour }</div></c:if>
		<c:set var="destName" value="-${query.destcity.sitename }"/>
		<c:set var="genOrdername" value="${tRentproduct.departcity.sitename}${query.tabType eq '跨市' and not empty query.destcity ?destName:'市内'}${query.daysnum }日按天包车"/>
		<form id="orderForm" action="${ctxWx}/pu/rentproduct/booking" method=post>
			<div style="padding:10px 10px 0px 10px;">
				<span class="mui-ellipsis">${genOrdername }</span>
				<p class="mui-ellipsis">
					<fmt:formatDate value="${query.fromdate}" pattern="MM月dd日"/>用车 
					<span>${tRentproduct.cargotype.typename }</span>
				</p>
			</div>
			<input type="hidden" name="ordername" value="${genOrdername }" />
			<input type="hidden" name="ordertype" value="${query.rentType }" />
			<input type="hidden" name="bookingdays" value="${query.daysnum }" />
			<input type="hidden" name="time" value="${query.time }" />
			<input type="hidden" name="realscheid" value="${query.rentid }" />
			<input type="hidden" name="fromdateStr" value="${query.fromdateStr }" />
			<input type="hidden" name="cargotypeid" value="${tRentproduct.cargotype.cargotypeid }" />
			<input type="hidden" name="office.id" value="${tRentproduct.office.id }" />
			<input type="hidden" name="departdateStr" value="<fmt:formatDate value="${query.departdate}" pattern="yyyy-MM-dd HH:mm:ss"/>" />
			<div class="mui-input-group">
				<div class="mui-input-row">
					<label>车辆数</label>
					<div class="mui-numbox" data-numbox-min='1' data-numbox-max='99'>
						<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
						<input id="purchasenum" value="1" name="purchasenum" class="mui-input-numbox" type="number" />
						<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
					</div>
				</div>
				<div class="mui-input-row">
					<label class="control-label" for="boardaddr">上车时间</label>
					<input type="text" value="${query.time }" disabled/>
				</div>
				<div class="mui-input-row">
					<label class="control-label" for="boardaddr">上车地点<span class="required-red">*</span></label>
					<input type="text" id="boardaddr" name="boardaddr" placeholder="输入上车地点"/>
				</div>
				<!-- <div class="mui-input-row">
					<label class="control-label" for="offaddr">下车地点</label>
					<input type="text" id="offaddr" name="offaddr" placeholder="输入下车地点"/>
				</div> -->
				<div class="mui-input-row">
					<label class="control-label" for="contacts">联系人<span class="required-red">*</span></label>
					<input type="text" id="contacts" name="contacts" placeholder="输入联系人" value="${sessionScope.pubuserPermission.mobile != sessionScope.pubuserPermission.name?sessionScope.pubuserPermission.name:'' }"/>
				</div>
				<div class="mui-input-row">
					<label class="control-label" for="payertel">联系电话<span class="required-red">*</span></label>
					<input type="text" id="payertel" name="payertel" placeholder="输入联系人"  value="${sessionScope.pubuserPermission.mobile }"/>
				</div>
				<div class="mui-input-row" style="height:130px;">
					<label class="control-label" for="payertel">行程备注</label>
					<textarea rows="5" name="remarks" maxlength="500" placeholder="如有多个目的地，请在此填写其他目的地及相应下车点"></textarea>
				</div>
			</div>
			<ul class="mui-table-view fix-top-5">
				<li class="mui-table-view-cell mui-collapse">
					<a class="mui-navigate-right" href="#">预定须知</a>
					<div class="mui-collapse-content">
						<c:set var="noticeType" value="${ORDER_TYPE_RENTPRODUCT_DAY }"/>
						<%@ include file="/WEB-INF/views/include/modules/rentproductNotice.jsp"%>
					</div>
				</li>
			</ul>
			<div class="mui-content-padded">
				<button type="button" id="totalPrice" class="mui-btn mui-btn-primary mui-btn-block" onclick="check();">去支付￥${tRentproduct.suitrtnprice*query.daysnum}</button>
			</div>
		</form>
	</div>
	<%@ include file="/WEB-INF/views/wx/include/script.jsp"%>
	<script>
		mui.init({
			swipeBack:true
		});
		$(function(){
			$('input').change(countTotalPrice);
		});
		// 计算总价格
		function countTotalPrice(){
			var totalPrice = 0;
			var purchasenum = $('#purchasenum').val();
			if(!isNaN(purchasenum) && purchasenum > 0){
				totalPrice+=purchasenum*${tRentproduct.suitrtnprice*query.daysnum};
			}
			$('#totalPrice').text("去支付￥"+totalPrice.toFixed(2)); 
		}
		function check(){
			var msg = '';
			if($('#boardaddr').val().trim()==''){
				msg='上车地点不能为空';
			}
			var r = /^1[3|4|5|7|8]\d{9}$/;
			var payertel = $('#payertel').val();
			var contacts = $('#contacts').val();
			if(contacts.trim() == ''){
				msg = '联系人不能为空';
			} else if(payertel.trim() == ''){
				msg = '手机号不能为空';
			} else if(!r.test(payertel)){
				msg = '手机号不正确';
			} 
			if(msg != ''){
				mui.alert(msg, '提示');
			} else {
				$('#orderForm').submit();
			}
		}
	</script>
</body>
</html>